import React,{Component} from 'react'
import './login.scss'
import 'antd/dist/antd.css';
import { Form, Input, Button,Checkbox,message} from 'antd';
import logo from './images/bg.jpg' //引入图片的路径
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {reqLogin} from '../../api'
import memoryUntils from '../../untils/memoryuntils'
import storageUtils from '../../untils/storageUtils'
// import { Redirect } from 'react-router-dom';

export  default class Login extends Component{

     
    render(){  
  // 如果有用户登陆则跳转到主页面
     const   user=memoryUntils.user;
     console.log("user"+user)
     debugger
      if (user||user._id) {
      // return<Redirect to='/'/>
        }
        return(
            <div className="login">
                <header className="login-header">
                   <img src={logo} alt="logo" title="logo"/>
                   <h2>欢迎来到后台管理系统</h2> 
                </header>
                <section className="login-section">
                    <div className="card">
                    <h2>登陆页面</h2>

                    < NormalLoginForm/>
                    </div>
              </section>
            </div>
        )
    }
}
 
const NormalLoginForm = () => {

  const [form] = Form.useForm();
  const onCheck=()=>{

  }
  
    const onFinish = async(values) => {
      // values会直接获取表单数据
      // console.log('Received values of form: ', values);

        //请求登陆
        const {username,password}=values;

          const result=await reqLogin(username,password)

          // const result =response.data
          // console.log(result)
          if(username===result.results.username){
            if(password===result.results.password){
              message.success("登陆成功！")
              //获取用户信息
           const user =result.results
           //存储user信息
           memoryUntils.user=user;
          //  console.log('user'+user)
           storageUtils.saveUser(user) //保存到local中

           console.log( memoryUntils.user)
              //跳转到登陆页面
              window.location.href = '/';
              
            }else{
              message.error("密码错误")
            }
          }else{
            message.error("用户名不存在！")
          }

          // console.log("请求成功!",username);
          // console.log("请求成功!",result);

       
        //验证是否已经发送成功！
        // reqLogin(username,password).then((response)=>{
        //     console.log('成功！')
        // }).catch(error=>{
        //   console.log('失败'+error);

        // })
        //获取表单数据进行登陆验证
        //promise
        /*1、主要用于异步计算
          2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
          3、可以在对象之间传递和操作promise，帮助我们处理队列
          await于async同时使用，await接收一个异步的表达式
          */
         
      
    };
  
     const  onFinishFailed =errorInfo=>{
     console.log('error',errorInfo)
   }
    return (
      <Form
      form={form}
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: 'Please input your Username!' ,
           },          
          { max:20, message: '名称不超过20个字符' },
          {min:5,message:'长度不能小于5个字符'},
          { pattern: new RegExp(/^[0-9a-zA-Z_]{1,}$/, "g") , message: '名称只允许包含数字、字母和下划线' }

          ]}
        >
          <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" 
        />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: 'Please input your Password!' },
        ]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="Password"
            
          />
        </Form.Item>
        <Form.Item>
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>Remember me</Checkbox>
          </Form.Item>
  
          <a className="login-form-forgot" href="/#">
            Forgot password
          </a>
        </Form.Item>
  
        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-form-button" 
          onClick={onCheck} >
                登陆
          </Button>
        </Form.Item>
      </Form>
    );
  }
  // 前台收集数据，收集表单数据
  /*
  async和await
  1、作用为了简化promise对象的使用：不再使用。then来指定成功或者失败的回调函数
  2、哪里使用await
  在返回promise表达式的左侧写await：不想要promise数据，而要promise异步执行的成功的value函数
  3、哪里使用async
  await所在的最近的函数定义的左侧。
  */
